<template>
  <el-card class="post" shadow="none">
    <div v-if="postInfo.status === 2" class="disable">
      <h1>该帖子已被封禁</h1>
    </div>
    <div slot="header" class="post-title">
      <span>{{ postInfo.title }}</span>
      <span>发帖人:{{ postInfo.userInfo.nickName }}</span>
    </div>
    <span class="post-content" v-html="format(postInfo.content)" />
    <div class="operator">
      <div class="buttons">
        <el-button-group>
          <el-button size="mini" icon="el-icon-caret-top" type="primary" :plain="postInfo.isLike === 0?false:true" @click.stop="like(postInfo)">喜欢</el-button>
          <el-button size="mini" icon="el-icon-caret-bottom" type="danger" :plain="postInfo.isLike === 1?false:true" @click.stop="dislike(postInfo)">不喜欢</el-button>
        </el-button-group>
        <div class="other-button">
          <span class="comment">
            <i class="el-icon-chat-dot-round" />
            {{ `${postInfo.replyCount}条回复` }}
          </span>
          <span class="collect" @click.stop="collect(postInfo)"><i :class="postInfo.isCollect === 0?'el-icon-star-on':'el-icon-star-off'" />收藏</span>
          <span class="report" @click.stop="report(postInfo)"><i class="el-icon-warning-outline" />举报</span>
        </div>
      </div>
      <span class="date">{{ postInfo.publishDate }}</span>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Post',
  props: {
    postInfo: {
      type: Object,
      default: undefined
    },
    like: {
      type: Function,
      default: undefined
    },
    dislike: {
      type: Function,
      default: undefined
    },
    collect: {
      type: Function,
      default: undefined
    },
    report: {
      type: Function,
      default: undefined
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API
    }
  },
  methods: {
    format(content) {
      var regexp = /<img src="/gi
      return content.replace(regexp, `<img src="${this.baseUrl}`)
    }
  }
}
</script>
<style lang="scss">
.post {
  .el-card__header {
    padding: 10px 10px;
  }
  .el-card__body {
    padding: 10px 10px;
  }
  .post-content {
    img {
      width: 100px;
      height: 100px;
    }
  }
}
</style>

<style lang="scss" scoped>
.post {
  width: 1100px;
  position: relative;
  .disable {
    color: red;
    background: black;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.5;
    z-index: 1000;
  }
    .post-title {
      display: flex;
      align-items: center;
      &>span:first-child {
        font-weight: bold;
        flex-grow: 1;
      }
    }
    .post-content {
      margin: 0;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .operator {
      margin-top: 10px;
      display: flex;
      align-items: center;
      .buttons {
        flex-grow: 1;
        .other-button {
          display: inline-block;
          margin-left: 10px;
          color: gray;
          font-size: 13px;
          span {
            margin-right: 10px;
          }
          span:hover {
            cursor: pointer;
          }
        }
      }
      .date {
        font-size: 13px;
        color: gray;
      }
    }
  }
</style>
